<template>
	<view class="container">
		<wjf-stat-breadcrumb :routes="routes"></wjf-stat-breadcrumb>
		<uni-list>
			<view class="avatar">
				<view class="">
					<cloud-image-alioss v-model="userInfo.avatar" @res-images="receiveImg"
						uploadDir="henghui/avatar"></cloud-image-alioss>
				</view>

			</view>
			<uni-list-item :title="$w('用户名')" :note="userInfo.username?userInfo.username:$w('未设置登录名称')"
				:showArrow="true" :clickable="true" :rightText="userInfo.username?$w('修改登录名称'):$w('设置登录名称')"
				@click="actNavTo('/pages/user/edit/username')">
			</uni-list-item>
			<uni-list-item :title="$w('昵称')" :showArrow="true" :clickable="true"
				@click="actNavTo('/pages/user/edit/nickname')" :note="userInfo.nickname?userInfo.nickname:$w('未设置昵称')"
				:rightText="userInfo.nickname?userInfo.nickname:$w('修改昵称')">
			</uni-list-item>
			<uni-list-item :title="$w('手机')" :note="userInfo.mobile?('+'+userInfo.country_code + userInfo.mobile):$w('未设置手机')" :showArrow="true"
				:clickable="true" @click="actNavTo('/pages/user/edit/mobile')"
				:rightText="`${userInfo.mobile?$w('变更手机'):('设置手机')}`">
			</uni-list-item>
			<uni-list-item :title="$w('邮箱')" :note="userInfo.email?userInfo.email:$w('未设置邮箱')" :showArrow="true"
				:clickable="true" @click="actNavTo('/pages/user/edit/email')"
				:rightText="`${userInfo.email?$w('变更邮箱'):$w('设置邮箱')}`">
			</uni-list-item>
			<!-- <uni-list-item v-if="userInfo.channel_code" :title="$w('渠道')" :rightText="userInfo.channel_code">
			</uni-list-item> -->
			<!-- #ifdef APP-PLUS -->
			<!-- <uni-list-item :title="$w('微信')" :showArrow="true" :clickable="true" @click="bindWeixin"
				:rightText="wxStatusText">
			</uni-list-item>
			<uni-list-item v-if="enableBank" :title="$w('绑定银行卡')" :showArrow="true" :clickable="true"
				@click="navTo('/pages/user/bind/bankcard')" :rightText="bankStatusText">
			</uni-list-item>
			<uni-list-item v-if="enableAlipay" :title="$w('绑定支付宝')" :showArrow="true" :clickable="true"
				@click="navTo('/pages/user/bind/alipay')" :rightText="alipayStatusText">
			</uni-list-item> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <uni-list-item title="绑定微信" :showArrow="true" :clickable="true" @click="bindWeixinH5"
				:rightText="wxStatusText">
			</uni-list-item> -->
			<!-- #endif -->

			<!-- <uni-list-item :title="$w('注销账号')" :showArrow="true" :clickable="true" @click=""
				:rightText="$w('注销后不能恢复')">
			</uni-list-item> -->
		</uni-list>
		<!-- <view class="" @click="test">
			<button type="default">test</button>
		</view> -->
	</view>
</template>

<script>
	// import mixin from '@/common/mixin/mixin-wjf.js'
	import {
		mapActions,
	} from 'vuex';
	const db = uniCloud.database();
	import message from '../i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		data() {
			return {
				cachekey: 'tiantian-accounts',
				isBindWx: false,
				info: {},
			};
		},
		onLoad() {
			uni.setStorage({
				key: "avatarField",
				data: "avatar_file" //原代码avatar __wjf
			})
			// console.log(this.cashoutTypes)
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			userInfo() {
				return this.$store.state.user.userInfo
			},
			routes() {
				return [{
						to: "/pages/index/user",
						name: this.$w("用户中心"),
					},
					{
						to: "",
						name: this.$w("用户信息"),
					}
				]
			}
		},
		methods: {
			test() {
				console.log(this.$store.state.user.userInfo);
			},
			...mapActions({
				getUserInfo: 'user/getUserInfo',
			}),
			async receiveImg(res) {
				await db.collection('uni-id-users').doc(this.userInfo._id).update({
					avatar: res
				})
				await this.getUserInfo()

			},
			actNavTo(url) {
				console.log(url);
				uni.navigateTo({
					url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			deactivate() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/userinfo/deactivate/deactivate"
				})
			},
			localLogout() {
				let data = [];
				//移除accounts
				this.dataList = uni.getStorageSync(this.cachekey);
				if (this.dataList && this.dataList.length > 1) {
					data = this.dataList.filter(e => e._id != this.userInfo._id);
				}
				uni.setStorageSync(this.cachekey, data);
				if (data.length == 0) {
					//移除本地token
					this.$store.commit('user/REMOVE_TOKEN');
					//重置用户信息
					this.$store.commit('user/SET_USER_INFO', {});
					//清空购物车
					this.$store.commit('mall/UPDATE_CART_NUMBER', 0);
				} else {
					let item = data[0];
					//切换到第一个
					this.$store.commit('user/SET_TOKEN', {
						token: item.token,
						tokenExpired: item.tokenExpired,
						userInfo: item,
					})
				}
				uni.hideLoading();
				// #ifdef MP
				uni.exitMiniProgram()
				return;
				// #endif
				this.navTimeBack(false, 100);
			},
			bindWeixinH5() {
				//是否需要解绑微信
				if (this.isBindWx) {
					return false;
				}
				if (this.customer.wx_auth) {
					window.location.href = this.customer.wx_auth;
				}
			},
			bindWeixin() {
				//是否需要解绑微信
				if (this.isBindWx) {
					return false;
				}
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						console.log('授权code', loginRes);
						this.$request('user/info/bind_weixin', {
							...loginRes
						}, {
							loading: true
						}).then(res => {
							//设置成功,刷新用户信息
							console.log("bind_weixin", res)
							//刷新用户信息
							this.$store.dispatch('user/getUserInfo');
						});
					}
				});
			},
			bind(provider) {
				console.log("bind " + provider)
				uni.login({
					provider: provider,
					success: (loginRes) => {
						console.log('授权code', loginRes);
						this.$request('user/info/bind', {
							provider: provider,
							...loginRes
						}, {
							loading: true
						}).then(res => {
							//设置成功,刷新用户信息
							console.log("bind " + provider, res)
							//刷新用户信息
							this.$store.dispatch('user/getUserInfo');
						});
					},
					fail: (e) => {
						console.log(e)
						this.$message(this.$w("授权失败"))
					}
				});
			},
			changeNickname() {
				this.$refs.nicknamePopup.open()
			},
			confirmEditNickname(value) {
				this.editData({
					nickname: value
				})
			},
			editData(data) {
				console.log("保存时的数据editData", data)
				this.$request("user/info/edit", data, {
					loading: true
				}).then(res => {
					//设置成功,刷新用户信息
					this.$store.dispatch('user/getUserInfo');
				})
				/* for (let key in data) {
					this.$set(this.info, key, data[key])
				} */
			}
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #eee;
	}

	.avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 22px 0;
		width: 100%;
	}
</style>